<style type="text/css">
    .webNodeAdd {
    }

    .webNodeAddTree {
        display: none;
    }

    .webNodeAddTree .webNodeName {
        cursor: pointer;
    }
</style>
<div class="toolbar">
    <button type="button" onClick="LC.S.save(webNodeSave)"><span class="icon-edit"></span> 保存</button>
    <button type="button" onClick="LC.S.save(webNodeSaveNew)"><span class="icon-plus"></span> 保存并新建</button>
    <button type="button" onClick="webNodeCancel();"><span class="icon-close"></span> 取消</button>
</div>
<div class="webNodeAdd">
    <div class="group">
        <div class="label">名　称：</div>
        <div class="value"><input type="text" name="name" regx="${check.name}"/></div>
    </div>
    <div class="group">
        <div class="label">父级栏目：</div>
        <div class="value">
            <input type="hidden" name="parentId" value="${parentId}" nullable/>
            <span class="parentName" onClick="$('.webNodeAddTree').dialog('open')" title="点击选择父级栏目"></span>
        </div>
    </div>
    <div class="group">
        <div class="label">地　址：</div>
        <div class="value"><input style="width: 400px" type="text" name="url" regx="${check.url}"/></div>
    </div>
    <div class="group">
        <div class="label">优先级：</div>
        <div class="value"><input type="number" name="index" regx="${check.index}"/></div>
    </div>
    <div class="group">
        <div class="label">类　型：</div>
        <div class="value">
            <select name="type" class="selectmenu" style="width: 150px">
                <option value="article">内容显示</option>
                <option value="list">内容列表</option>
                <option value="url">超链接</option>
                <#--<option value="text">单行文本</option>
                <option value="textarea">多行文本</option>
                <option value="miniEditor">简单编辑</option>
                <option value="simpleEditor">迷你编辑</option>
                <option value="fullEditor">高级编辑</option>
                <option value="file">文件</option>
                <option value="image">图片</option>-->
            </select>
        </div>
    </div>
    <div class="group">
        <div class="label">列表显示：</div>
        <div class="value">
            <label><input type="radio" name="list" value="false">否</label>
            &nbsp;&nbsp;
            <label><input type="radio" name="list" value="true" checked>是</label></div>
    </div>
    <div class="group">
        <div class="label">key：</div>
        <div class="value"><input type="text" name="key" regx="${check.key}"/></div>
    </div>
    <div class="webNodeAddTree">
        <div id="WEB_NODE_ROOT" pid="">
            <span class="webNodeName" title="">
                <span class="icon-libreoffice"></span>
                <span class="name" onClick="choseParent('');$('.webNodeAddTree').dialog('close')">根级栏目</span>
            </span>
        </div>
    <#list webNodes as m>
        <div id="${m._id}" pid="${m.parentId!"WEB_NODE_ROOT"}">
            <span class="webNodeName" title="${m.notes!""}">
                <span class="icon-libreoffice"></span>
                <span class="name"
                      onClick="choseParent('${m._id}');$('.webNodeAddTree').dialog('close')">${m.name}</span>
            </span>
        </div>
    </#list>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function (e) {
        var webNodeAddTree = $('.webNodeAdd .webNodeAddTree').jTree();
        webNodeAddTree.showAll();
        $('.parentName').button();
        choseParent('${parentId}');
        dialog('.webNodeAddTree', {
            autoOpen: false,
            modal: true,
            title: "选择父级栏目"
        });
    });
    function choseParent(pid) {
        if (pid == '') {
            pid = 'WEB_NODE_ROOT';
        }
        var parent = $('#' + pid);
        if (parent.length == 0) {
            parent = $('[pid=WEB_NODE_ROOT]');
        }
        $('.webNodeAdd .parentName').children().text(parent.find('.name:first').text());
        if (parent.attr('id') == 'WEB_NODE_ROOT') {
            $('input[name=parentId]').val('');
        } else {
            $('input[name=parentId]').val(parent.attr('id'));
        }
    }
    function webNodeSave(rs) {
        LC.goPage(LC.S.serviceUrl, '.webNodeLeft', {_act: 'list'});
        LC.goPage(LC.S.serviceUrl, LC.S.PANNEL_DETAIL, {_act: 'detail', id: rs.id});
    }
    function webNodeCancel() {
        var pid = '${parentId}';
        var act = 'detail';
        if (pid == '') {
            act = 'add';
        }
        LC.goPage(LC.S.serviceUrl, LC.S.PANNEL_DETAIL, {_act: act, id: pid});
    }
    function webNodeSaveNew() {
        LC.goPage(LC.S.serviceUrl, '.webNodeLeft', {_act: 'list'});
        var pid = $('input[name=parentId]').val();
        LC.S.add([{name: 'parentId', value: pid}])
    }
</script>